<template>
	<view class="stock">
		<view class="has-stock">
      
      <!-- 收益区域 -->
		  <view class="profileArea">
		    <profile></profile>
		  </view>
      
      <!-- 功能区 -->
		  <view class="functionArea">
		    <functionArea />
		  </view>
      
      <!-- 持仓表格区 -->
		  <view class="stockTableArea">
		    <stockTable />
		  </view>
		</view>
    <view class="has-not-stock">
      <listCard :height='250'>
        <view class="tip">
          说明:
        </view>
        <view class="tip">
          - 橘色背景表示该转债已不在推荐持有列表内
        </view>
        <view class="tip">
          表格中的‘持仓’表示‘持仓单价(持仓数量)’
        </view>
        <view class="tip">
          - '轮出'操作是指卖出该可转债
        </view>
        <view class="tip">
          - '一键换仓'操作是指卖出不在双低排名前10的可转债，买入尚未持有的前10的可转债
        </view>
      </listCard>
    </view>
	</view>
</template>

<script>
  import stockTable from './_component/stockTable.vue'
  import profile from './_component/profile.vue'
  import listCard from '@/components/list-card/list-card.vue'
  import functionArea from './_component/functionArea.vue'
  
  import { createNamespacedHelpers } from 'vuex'
  const { mapActions } = createNamespacedHelpers('stock')
	export default {
    components: {
      stockTable,
      profile,
      listCard,
      functionArea
    },
    methods: {
      ...mapActions(['getProfileDataReq', 'getStockListReq'])
    },
		onShow() {
				this.getStockListReq()
        this.getProfileDataReq()
		},
    onPullDownRefresh() {
      this.getProfileDataReq()
      this.getStockListReq()
    }
	}
</script>

<style lang="scss" scoped>
  .stock {
    width: 690rpx;
    margin: 30rpx auto;
    .tip {
      font-size: 30rpx;
    }
  }
</style>
